<!-- 
 * @description: 
 * @fileName: company.vue 
 * @author: 自己的名字 
 * @date: 2025-07-21 08:43:25
 * @version: V1.0.0 
!-->
<script setup lang='ts'>
import Tabbar from '@/components/Tabbar/tabbar.vue'
import Swiper from '@/components/Swiper/index.vue'
import Back from '@/components/Back/Back.vue'
import { onShow } from '@dcloudio/uni-app'
import { productsData, chunkArray } from './data'
function goPage(path: string) { //页面跳转
    uni.navigateTo({ url: path })
}

const chunkedArray = computed(() => { return chunkArray(productsData.productsProfile, 3); })
</script>
<template>
    <Tabbar />
    <view class=" absolute w-full h-[80vh] flex flex-col  items-center  mt-25">
        <swiper class="w-full h-[58vh]" :display-multiple-items="1" :autoplay="false" :circular="false"
            :indicator-dots="true" indicator-color="#fff" indicator-active-color="#2196F3">
            <swiper-item v-for="(listItem, listIndex) in chunkedArray" :key="listIndex">
                <view class="grid grid-cols-3 gap-4 p-4">
                    <template v-for="(item, index) in listItem" :key="index">
                        <view @tap="goPage(item.path + `?type=${item.type}&title=${item.title}`)"
                            class="w-full h-[50vh] flex flex-col justify-center items-center bg-white rounded-md  pb-4"
                            style="background: rgba(255, 255, 255, 0.6);">
                            <image :src="item.poster" mode="aspectFit" class="w-full" />
                            <view class="text-center w-full text-40 font-bold">{{ item.title }}</view>
                            <button v-if="item.title"
                                class="w-[150rpx] h-[50rpx] text-20 bg-white text-black rounded-md mt-2 flex flex-row justify-center items-center">查看详情</button>
                        </view>
                    </template>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>


<style scoped lang='scss'></style>